.frame {
  position: absolute;
  width: 400px;
  height: 400px;
  inset: 0;
  margin: auto;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  overflow: hidden;
  border-radius: 2px;
}

.stripes {
  position: relative;
  top: -67px;
  left: -100px;
  width: 600px;
  transform: rotate(45deg);
}
.stripes .stripe {
  background-color: #353535;
  width: 600px;
  height: 3px;
  margin-bottom: 16px;
}

.center {
  position: absolute;
  width: 260px;
  height: 260px;
  inset: 0;
  margin: auto;
  background-color: #353535;
  border-radius: 3px;
  box-shadow: 8px 10px 15px rgba(0, 0, 0, 0.3);
}

.polygon {
  position: absolute;
  width: 160px;
  height: 140px;
  inset: 0;
  margin: auto;
}
.polygon .light {
  fill: #eee;
  transition: all 0.5s ease-in-out;
}
.polygon .middle {
  fill: #ccc;
  transition: all 0.5s ease-in-out;
}
.polygon .dark {
  fill: #aaa;
  transition: all 0.5s ease-in-out;
}
.polygon:hover .light {
  fill: #aaa;
}
.polygon:hover .middle {
  fill: #eee;
}
.polygon:hover .dark {
  fill: #ccc;
}